<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 WebSocket 的使用</title>
</head>

<body>
    <input type="text" id="message">
    <button id="send-button">发送</button>

    <script>
        // 编写 js 使用 WebSocket 的代码
        // 创建一个 WebSocket 的实例
        let websocket = new WebSocket("ws://127.0.0.1:8080/test");
        // 给这个 websocket 注册一些回调函数
        websocket.onopen = function () {
            // 连接建立完成后，就会自动执行到
            console.log("websocket 连接成功！");
        }

        websocket.onclose = function () {
            // 连接断开后，自动执行到
            console.log("websocket 连接断开！");
        }

        websocket.onerror = function () {
            // 连接异常时，自动执行到
            console.log("websocket 连接异常！");
        }

        websocket.onmessage = function (e) {
            // 收到消息时，自动执行到
            console.log("websocket 收到消息：" + e.data);
        }
        let message = document.querySelector("#message");
        let sendButton = document.querySelector("#send-button");
        sendButton.onclick = function () {
            console.log("websocket 发送消息！" + message.value);
            websocket.send(message.value);
        }

    </script>
</body>

</html>